<template>
	<view style="position: fixed;background-color: #f5f5f5;width: 100%;height: 100%;">

		<!-- 顶部 -->
		<view style="display: flex;flex-direction: row;margin: 30rpx 25rpx;">

			<view style="width: 100rpx;flex-grow: 2;line-height:80rpx;margin-left: 20rpx">
				<text>晒好物</text>
			</view>
			<view style="width: 20rpx;flex-grow: 1;margin-right: 20rpx;">
				<u-button color="#53c21d" @click="fb()" text="发布" shape="circle"></u-button>
			</view>

		</view>

		<!-- 输入描述和上传图片 -->
		<view style="background-color: #ffffff;border-radius: 20rpx;margin:25rpx;padding:20rpx">

			<view style="margin: 20rpx;">
				<u--textarea v-model="post.text" placeholder="请输入内容" border="none"
					style="background-color: #ffffff;"></u--textarea>
				<u-upload style="margin: 20rpx;" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
					name="1" multiple :maxCount="9"></u-upload>
			</view>

		</view>
		
	</view>
		
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				post: {
					id: '', // 后端存入数据库后获取
					userId: '',
					text: '',
					date: ''
				},
				fileList1: [], //上传图片
				imgList: [],
			}
		},
		methods: {
			fb() {
				if (this.post.text == '') {
					uni.showToast({
						icon: 'none',
						title: '输入内容不能为空！'
					})
				} else if (this.imgList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请添加图片!'
					})
				} else {
					// 满足条件允许发布
					this.upload();
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.imgList.pop([].concat(event.file))
				console.log(this.imgList)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				this.imgList = lists; // 设置上传队列
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {

			},
			upload() {
				var that = this;
			
				uni.request({
					method: 'POST',
					url: getApp().globalData.url + "/post/insertPost",
					data: {
						post: that.post
					},
					success(res) {
						console.log(res)
						let code = res.data.code;
						if (code == 200) {
							uni.showToast({
								icon: 'none',
								title: '发布成功！'
							})
							that.post.id = res.data.data.postId;
							that.imgUpload();
							uni.switchTab({
								url: '/pages/5_UserPage/5_UserPage'
							})
						}
						
			
					}
				})
			
			},
			imgUpload() {
				let that = this;
				for (let i = 0; i < that.imgList.length; i++) {
					uni.uploadFile({
						url: getApp().globalData.url + "/post/imgUpload",
						filePath: that.imgList[i].url,
						name: 'file',
						formData: {
							userId: that.user.id,
							postId: that.post.id
						},
						success(res) {
							console.log(res.data)
						}
					})
				}
			}
		},
		onLoad() {
			// 获取登录状态
			let that = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					that.user = res.data;
					// console.log(that.user)
					that.post.userId = that.user.id;
				},
				fail() {
					that.user = null;
				}
			});
		}
	}
</script>

<style>

</style>